<!-- dialog -->
<template>
     <div>
      <el-dialog
            :title="detailRow.name"
            :visible.sync="visible"
            :modal-append-to-body='false'
            @close="$emit('update:show', false)"
           >
            <el-descriptions direction="vertical" :column="4" border>
                <el-descriptions-item label="头像" :span="4">
                    <img :src="detailRow.avatar" alt="暂无" class="img-avatar">
                </el-descriptions-item>
                <el-descriptions-item label="手机号" :span="2">{{detailRow.phone}}</el-descriptions-item>
                <el-descriptions-item label="性别" :span="2">
                    <el-tag size="small">{{detailRow.gender}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="婚姻状况" :span="1">
                    <el-tag size="small">{{detailRow.marital_status}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="身份证">{{detailRow.idNumber ? detailRow.idNumber.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2") : "" }}</el-descriptions-item>
                <el-descriptions-item label="邮箱" :span="2">{{detailRow.email}}</el-descriptions-item>
                <el-descriptions-item label="用户注册日期" >{{detailRow.date}}</el-descriptions-item>
                <el-descriptions-item label="是否管理员" :span="1">
                    <el-tag size="small">{{detailRow.isAdmin}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="学校" :span="2">{{detailRow.school ? detailRow.school : '未知'}}</el-descriptions-item>
                <el-descriptions-item label="工作经历" :span="4">{{detailRow.workExperience ? detailRow.workExperience : "无"}}</el-descriptions-item>
                <el-descriptions-item label="联系地址" :span="4">{{detailRow.address}}</el-descriptions-item>
           </el-descriptions>    
        </el-dialog>
    </div>

</template>

<script>
export default {
    data () {
        return {
            visible: this.show,
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        detailRow: {
            type: Object,
            require: true,
        }
    },
    watch: {
        show () {
            this.visible = this.show;
        }
    },
}
</script>

<style scoped>
.img-avatar{
    width: 100px;
    height: 100px;
}
</style>
